<template>
  <div class="navswiper">
    <div class="navall">
      <div class="navleft">
        <ul>
          <li><a href=""><img src="../../../assets/img/new14.png" alt=""><span>银行间产品</span></a></li>
          <li><a href=""><img src="../../../assets/img/new13.png" alt=""><span>委托债权</span></a></li>
          <li><a href=""><img src="../../../assets/img/new15.png" alt=""><span>权益类资产</span></a></li>
        </ul>
      </div>
      <div class="navcenter">
        <swiper :options="swiperOption" v-if="showSwiper">
          <swiper-slide v-for="item of list" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl" />
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
      <component-userinfo v-if="checkinfo"></component-userinfo>
      <component-userlogin v-if="checklogin"></component-userlogin>
    </div>
  </div>
</template>

<script>
import ComponentUserinfo from './navswiper/Userinfo'
import ComponentUserlogin from './navswiper/Userlogin'
export default {
  name: 'Navswiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        autoplay: 3000,
        loop: true
      },
      list: [{id: '001', imgUrl: 'https://cap.cfae.cn/img/zq1.png'},
        {id: '002', imgUrl: 'https://cap.cfae.cn/img/wz2.png'},
        {id: '003', imgUrl: 'https://cap.cfae.cn/img/gj1.png'}],
      checkinfo: true,
      checklogin: false
    }
  },
  components: {
    ComponentUserinfo,
    ComponentUserlogin
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style scoped type="text/stylus" lang="stylus">
.navswiper
  background:url("../../../assets/img/aaaaa.jpg") no-repeat;background-size:100% 100%; width: 100% ;height:300px;overflow hidden
.navall
  width:1200px;margin:0 auto;height:300px;overflow hidden
  .navleft
    width:210px;height:270px;background:#fff;border-radius:5px;margin-top:15px;float:left
    li:last-child
      border:none
    li
      height:88px; width:170px; margin:0 auto; line-height:88px; text-align:left;border-bottom:1px solid #EEEEEE;
      img
        margin-left:20px;
      span
        margin-left:16px;font-size:16px;color:#000;font-weight:block
  .navcenter >>> .swiper-pagination-bullet-active
    background: #BA9959;width:14px;height:14px;
  .navcenter >>> .swiper-pagination-bullet
    width:14px;height:14px;
  .navcenter
    width:700px;height:270px;margin-top:15px;margin-left:10px;float:left;
</style>
